import React, { Component } from 'react'
import './index.css'
import '../../../node_modules/font-awesome/css/font-awesome.min.css';
import { NavLink,Route } from 'react-router-dom';
import ScoreList from '../ScoreList/ScoreList';
import ClassSchedule from '../ClassSchedule/ClassSchedule';
import PersonalFiles from '../PersonalFiles/PersonalFiles';
import ScoreQuery from '../ScoreQuery/ScoreQuery';
import PersonalList from '../PersonalList/PersonalList'
import PersonalEdit from '../PersonalEdit/PersonalEdit'
import PersonalAdd from '../PersonalAdd/PersonalAdd'

export default class Sidebar extends Component {
  render() {
    return (
      <div>
        <div className="container">
        <div className="row">
        <div className="col-md-2">
        <div className="navbar">
                <input type="checkbox" id="checkbox"/>
                <label htmlFor="checkbox">
                    <i className="fa fa-bars" aria-hidden="true"></i>   
                </label>
                <ul>
                    <li>
                        <img src={require('./img/admin.jpg')} alt=""/>
                        <span>欢迎您访问！</span>
                    </li>
                    <li>
                        <NavLink to="/ScoreList">
                            <i className="fa fa-search" aria-hidden="true"></i>
                            <span>成绩管理</span>
                        </NavLink>
                    </li>    
                    <li>
                        <NavLink to="/ClassSchedule">
                            <i className="fa fa-table" aria-hidden="true"></i>
                            <span>课程管理</span>
                        </NavLink>
                    </li>
                    <li>
                        <NavLink to="/PersonalList">
                            <i className="fa fa-drivers-license" aria-hidden="true"></i>
                            <span>电子档案管理</span>
                        </NavLink>
                    </li>
                </ul>
            </div>
        </div>
            <div className="col-md-10">
                <div className="panel">
                    <div className="panel-body">
                        {/* 选课管理 */}
                        <Route path="/ClassSchedule" component={ClassSchedule}/>
                        {/* 档案管理 */}
                        <Route path="/PersonalList" component={PersonalList}/>
                        <Route path="/Sidebar/PersonalFiles/:id" component={PersonalFiles}/>
                        <Route path="/Sidebar/PersonalEdit/:id" component={PersonalEdit}/>
                        <Route path="/Sidebar/PersonalAdd" component={PersonalAdd}/>
                        {/* 成绩管理 */}
                        <Route path="/ScoreList" component={ScoreList}/>
                        <Route path="/Sidebar/ScoreQuery/:id" component={ScoreQuery}/>

                    </div>
                </div>
            </div>
        </div>
        </div>
      </div>
    )
  }
}
